<template>
	<div class="register_view">
		<div class="register_container">
			<!-- 左侧背景区域 -->
			<div class="register_left">
				<div class="left_content">
					<h2 class="left_title">成为创业者</h2>
					<p class="left_subtitle">开启您的创业之旅，实现创新梦想</p>
					<div class="stats_cards">
						<div class="stat_card">
							<div class="card_label">创业者优势</div>
							<div class="stat_content">
								<div class="stat_item">
									<i class="el-icon-star-on"></i>
									<span>获取专业导师指导</span>
								</div>
								<div class="stat_item">
									<i class="el-icon-money"></i>
									<span>对接优质创投资源</span>
								</div>
								<div class="stat_item">
									<i class="el-icon-office-building"></i>
									<span>享受创业园区服务</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 右侧注册表单区域 -->
			<div class="register_right">
				<el-form :model="registerForm" class="register_form">
					<div class="title_view">创业者注册</div>
					<div class="form-content">
						<!-- 是否毕业 -->
						<div class="form-group">
							<label class="form-label">是否毕业：</label>
							<el-select 
								class="form-select"
								v-model="registerForm.shifoubiye" 
								placeholder="请选择是否毕业">
								<el-option v-for="item in chuangyezheshifoubiyeLists" :label="item" :value="item"></el-option>
							</el-select>
						</div>
						
						<!-- 账号信息 -->
						<div class="form-group" v-show="registerForm.shifoubiye === '是'|| registerForm.shifoubiye === '否'">
							<label class="form-label">{{ registerForm.shifoubiye === '是' ? '账号' : '学号' }}：</label>
							<input class="form-input" v-model="registerForm.xuehao" placeholder="请输入" type="text" />
						</div>
						
						<!-- 基本信息 -->
						<div class="form-row">
							<div class="form-group half">
								<label class="form-label">姓名：</label>
								<input class="form-input" v-model="registerForm.xueshengxingming" placeholder="请输入学生姓名" type="text" />
							</div>
							<div class="form-group half">
								<label class="form-label">性别：</label>
								<el-select class="form-select" v-model="registerForm.xingbie" placeholder="请选择性别">
									<el-option v-for="item in chuangyezhexingbieLists" :label="item" :value="item"></el-option>
								</el-select>
							</div>
						</div>
						
						<!-- 密码设置 -->
						<div class="form-row">
							<div class="form-group half">
								<label class="form-label">密码：</label>
								<input class="form-input" v-model="registerForm.mima" placeholder="请输入密码" type="password" />
							</div>
							<div class="form-group half">
								<label class="form-label">确认密码：</label>
								<input class="form-input" v-model="registerForm.mima2" type="password" placeholder="请输入确认密码" />
							</div>
						</div>
						
						<!-- 地区信息 -->
						<div class="form-group">
							<label class="form-label">城市：</label>
							<el-select 
								class="form-select"
								v-model="registerForm.chengshi" 
								placeholder="请选择城市"
								@change="(e)=>change1(e,'chengshi')">
								<el-option v-for="item in chuangyezhechengshiLists" :label="item" :value="item"></el-option>
							</el-select>
						</div>
						
						<!-- 毕业用户相关信息 -->
						<div v-if="registerForm.shifoubiye === '是'">
							<div class="form-row">
								<div class="form-group half">
									<label class="form-label">园区：</label>
									<el-select 
										class="form-select"
										v-model="registerForm.yuanqu" 
										placeholder="请选择园区"
										@change="(e)=>change2(e,'yuanqu')">
										<el-option v-for="item in chuangyezheyuanquLists" :label="item" :value="item"></el-option>
									</el-select>
								</div>
								<div class="form-group half">
									<label class="form-label">街道：</label>
									<el-select 
										class="form-select" 
										v-model="registerForm.jiedao" 
										placeholder="请选择街道">
										<el-option v-for="item in chuangyezhejiedaoLists" :label="item" :value="item"></el-option>
									</el-select>
								</div>
							</div>
							<div class="form-group">
								<label class="form-label">毕业年份：</label>
								<select class="form-input" v-model="registerForm.biyenianfen" style="height: 40px">
									<option v-for="year in yearList" :value="year" :key="year">{{ year }}</option>
								</select>
							</div>
						</div>
						
						<!-- 在校用户相关信息 -->
						<div v-if="registerForm.shifoubiye === '否'">
							<div class="form-row">
								<div class="form-group half">
									<label class="form-label">学校：</label>
									<el-select 
										class="form-select"
										v-model="registerForm.suozaixuexiao" 
										placeholder="请选择学校"
										@change="(e)=>changeSchool(e,'suozaixuexiao')">
										<el-option v-for="item in chuangyezhexuexiaoLists" :label="item" :value="item"></el-option>
									</el-select>
								</div>
								<div class="form-group half">
									<label class="form-label">学院：</label>
									<el-select 
										class="form-select"
										v-model="registerForm.xueyuan" 
										placeholder="请选择学院">
										<el-option v-for="item in chuangyezhexueyuanLists" :label="item" :value="item"></el-option>
									</el-select>
								</div>
							</div>
							<div class="form-group">
								<label class="form-label">年级：</label>
								<input class="form-input" v-model="registerForm.nianji" placeholder="请输入年级" type="text" />
							</div>
						</div>
						
						<!-- 教育信息 -->
						<div class="form-row">
							<div class="form-group half">
								<label class="form-label">专业：</label>
								<input class="form-input" v-model="registerForm.zhuanye" placeholder="请输入专业" type="text" />
							</div>
							<div class="form-group half">
								<label class="form-label">学历：</label>
								<el-select class="form-select" v-model="registerForm.xueli" placeholder="请选择学历">
									<el-option v-for="item in chuangyezhexueliLists" :label="item" :value="item"></el-option>
								</el-select>
							</div>
						</div>
						
						<!-- 项目信息 -->
						<div class="form-group">
							<label class="form-label">项目负责人：</label>
							<el-select class="form-select" v-model="registerForm.xiangmufuzeren" placeholder="请选择项目负责人">
								<el-option v-for="item in chuangyezhexiangmufuzerenLists" :label="item" :value="item"></el-option>
							</el-select>
						</div>
						
						<!-- 头像上传 -->
						<div class="form-group">
							<label class="form-label">头像：</label>
							<div class="upload-wrapper">
								<uploads
									action="file/upload" 
									tip="请上传头像"
									style="width: 100%;text-align: left;"
									:fileUrls="registerForm.touxiang?registerForm.touxiang:''" 
									@change="touxiangUploadSuccess">
								</uploads>
							</div>
						</div>
						
						<!-- 创业相关信息 -->
						<div class="form-group">
							<label class="form-label">创业领域：</label>
							<input class="form-input" v-model="registerForm.chuangyelingyu" placeholder="请输入创业领域" type="text" />
						</div>
						
						<div class="form-group">
							<label class="form-label">参加过的创业活动：</label>
							<textarea class="form-textarea" v-model="registerForm.canjiahuodong" placeholder="请输入参加过的创业活动"></textarea>
						</div>
						
						<div class="form-group">
							<label class="form-label">参与过的项目：</label>
							<textarea class="form-textarea" v-model="registerForm.canyuxiangmu" placeholder="请输入参与过的项目"></textarea>
						</div>
						
						<!-- 联系方式与验证码 -->
						<div class="form-group">
							<label class="form-label">邮箱：</label>
							<input class="form-input" v-model="registerForm.email" placeholder="请输入邮箱" type="text" />
						</div>
						
						<div class="form-group">
							<label class="form-label">验证码：</label>
							<div class="verification-code-wrapper">
								<input class="form-input code-input" v-model="emailCode" placeholder="请输入验证码" />
								<el-button class="send-code-btn" :disabled="getCodeType" :type="getCodeType?'info':'primary'" @click="getEmailCode">{{setCode}}</el-button>
							</div>
						</div>
						
						<div class="form-group">
							<label class="form-label">手机号：</label>
							<input class="form-input" v-model="registerForm.shoujihaoma" placeholder="请输入手机号" type="text" />
						</div>
						
						<div class="form-group">
							<label class="form-label">验证码：</label>
							<div class="verification-code-wrapper">
								<input class="form-input code-input" v-model="smsCode" placeholder="请输入验证码" />
								<el-button class="send-code-btn" :disabled="getSmsCodeType" :type="getSmsCodeType?'info':'primary'" @click="getSmsCode">{{setSmsCode}}</el-button>
							</div>
						</div>
						
						<!-- 按钮区域 -->
						<div class="button-wrapper">
							<el-button class="register-btn" type="primary" @click="handleRegister">注册</el-button>
							<div class="login-link" @click="close">已有账号，直接登录</div>
						</div>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		getCurrentInstance,
		nextTick,
		onMounted,
	} from 'vue';
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const projectName = context?.$project.projectName
	//获取注册类型
	import { useRoute } from 'vue-router';
	const route = useRoute()
	const tableName = ref('chuangyezhe')
	const datePickerRef = ref(null);

	//公共方法
	const getUUID=()=> {
		return new Date().getTime();
	}
	
	const registerForm = ref({
        xingbie: '',
        xueli: '',
        shifoubiye: '',
        xiangmufuzeren: '',
        chengshi: '',
        yuanqu: '',
        jiedao: '',
		biyenianfen: 2025,
		suozaixuexiao: '', // 添加所在学校字段
	});
	//验证码
	const time = ref(0)
	const setCode = ref('发送验证码')
	const getCodeType = ref(false)
	const timer=()=>{
		if(time.value>0){
			getCodeType.value = true
			setCode.value = time.value + 's'
			time.value--
			setTimeout(()=>{
				timer()
			},1000)
		}else{
			time.value = 0
			setCode.value = '发送验证码'
			getCodeType.value = false
		}
	}
	//邮箱验证码
	const emailCode = ref('')
	const getEmailCode=()=>{
		if((!registerForm.value.email)){
			context?.$toolUtil.message(`邮箱不能为空`,'error')
			return false
		}
		if(!context?.$toolUtil.isEmail(registerForm.value.email)){
			context?.$toolUtil.message(`邮箱格式不正确`,'error')
			return false
		}
		time.value = 60
		timer()
		context?.$http({
			url:`${tableName.value}/sendemail?email=`+registerForm.value.email,
			method:'get'
		}).then(res=>{
			context?.$toolUtil.message(`发送成功`,'success')
		})
	}
	const chuangyezhexingbieLists = ref([])
	const chuangyezhexueliLists = ref([])
	const chuangyezheshifoubiyeLists = ref([])
	const chuangyezhexiangmufuzerenLists = ref([])
	const chuangyezhechengshiLists = ref([])
	const chuangyezheyuanquLists = ref([])
	const chuangyezhejiedaoLists = ref([])
	const chuangyezhexuexiaoLists = ref([]) // 学校列表
	const chuangyezhexueyuanLists = ref([]) // 学院列表
	
	const init=()=>{
		chuangyezhexingbieLists.value = "男,女".split(',')
		chuangyezhexueliLists.value = "小学,初中,高中,中专,大专,本科,研究生,博士".split(',')
		chuangyezheshifoubiyeLists.value = "是,否".split(',')
		chuangyezhexiangmufuzerenLists.value = "是,否".split(',')
		context?.$http({
			url:`option/chengshi/chengshi`,
			method:'get'
		}).then(res=>{
			chuangyezhechengshiLists.value = res.data.data
		})
	}
    const touxiangUploadSuccess=(fileUrls)=> {
        registerForm.value.touxiang = fileUrls;
    }
	// 多级联动参数
    const change1=(e,conditionColumn)=>{
        registerForm.value.yuanqu = '';
        chuangyezheyuanquLists.value = [];
        registerForm.value.jiedao = '';
        chuangyezhejiedaoLists.value = [];
        
        // 如果是未毕业学生，选择城市后加载学校列表
        if(registerForm.value.shifoubiye === '否') {
            registerForm.value.suozaixuexiao = '';
            chuangyezhexuexiaoLists.value = [];
            registerForm.value.xueyuan = '';
            chuangyezhexueyuanLists.value = [];
            
            context?.$http({
                url: `option/xuexiao/xuexiao?conditionColumn=${conditionColumn}&conditionValue=${e}`,
                method: "get"
            }).then(res => {
                chuangyezhexuexiaoLists.value = res.data.data
            });
        }
        
        context?.$http({
            url: `option/yuanqu/yuanqu?conditionColumn=${conditionColumn}&conditionValue=${e}`,
            method: "get"
        }).then(res => {
			chuangyezheyuanquLists.value = res.data.data
        });
    }
    
    // 添加学校选择后加载学院的函数
    const changeSchool=(e,conditionColumn)=>{
        registerForm.value.xueyuan = '';
        chuangyezhexueyuanLists.value = [];
        
        // 修改请求参数，确保正确传递学校名称
        context?.$http({
            url: `option/xueyuan/xueyuan?conditionColumn=xuexiao&conditionValue=${e}`,
            method: "get"
        }).then(res => {
            console.log('学院数据请求结果:', res)
            if(res.data && res.data.data && res.data.data.length > 0) {
                chuangyezhexueyuanLists.value = res.data.data
                console.log('学院数据加载成功:', chuangyezhexueyuanLists.value)
            } else {
                // 如果没有数据，可以设置一些默认值或提示用户
                console.log('未找到对应学校的学院数据')
                // 如果数据库中没有对应的学院数据，可以尝试直接从数据库中获取所有学院
                context?.$http({
                    url: `option/xueyuan/xueyuan`,
                    method: "get"
                }).then(fallbackRes => {
                    if(fallbackRes.data && fallbackRes.data.data) {
                        chuangyezhexueyuanLists.value = fallbackRes.data.data
                        console.log('加载所有学院数据:', chuangyezhexueyuanLists.value)
                    }
                })
            }
        }).catch(err => {
            console.error('获取学院数据失败:', err)
            // 错误处理：尝试不带条件获取所有学院
            context?.$http({
                url: `option/xueyuan/xueyuan`,
                method: "get"
            }).then(fallbackRes => {
                if(fallbackRes.data && fallbackRes.data.data) {
                    chuangyezhexueyuanLists.value = fallbackRes.data.data
                }
            })
        });
    }
    
    const change2=(e,conditionColumn)=>{
        registerForm.value.jiedao = '';
        chuangyezhejiedaoLists.value = [];
        context?.$http({
            url: `option/jiedao/jiedao?conditionColumn=${conditionColumn}&conditionValue=${e}`,
            method: "get"
        }).then(res => {
			chuangyezhejiedaoLists.value = res.data.data
        });
    }
	//注册按钮
	const handleRegister = () => {
		let url = tableName.value +"/register";
		if((!registerForm.value.mima)){
			context?.$toolUtil.message(`密码不能为空`,'error')
			return false
		}
		if((!registerForm.value.xuehao&&registerForm.value.shifoubiye === '否')){
			context?.$toolUtil.message(`学号不能为空`,'error')
			return false
		}
		if((!registerForm.value.xuehao&&registerForm.value.shifoubiye === '是')){
			context?.$toolUtil.message(`账号不能为空`,'error')
			return false
		}
		if(registerForm.value.mima!=registerForm.value.mima2){
			context?.$toolUtil.message('两次密码输入不一致','error')
			return false
		}
		if((!registerForm.value.xueshengxingming)){
			context?.$toolUtil.message(`姓名不能为空`,'error')
			return false
		}
		if((!registerForm.value.xingbie)){
			context?.$toolUtil.message(`性别不能为空`,'error')
			return false
		}
		if((!registerForm.value.xueyuan&&registerForm.value.shifoubiye === '否')){
			context?.$toolUtil.message(`学院不能为空`,'error')
			return false
		}
		if((!registerForm.value.zhuanye)){
			context?.$toolUtil.message(`专业不能为空`,'error')
			return false
		}
		if((!registerForm.value.nianji&&registerForm.value.shifoubiye === '否')){
			context?.$toolUtil.message(`年级不能为空`,'error')
			return false
		}
		if((!registerForm.value.xueli)){
			context?.$toolUtil.message(`学历不能为空`,'error')
			return false
		}
		if((!registerForm.value.shifoubiye)){
			context?.$toolUtil.message(`是否毕业不能为空`,'error')
			return false
		}
		if ((typeof registerForm.value.biyenianfen !== 'number')) {
			console.error('类型错误:', typeof registerForm.value.biyenianfen);
		}
		if((!registerForm.value.biyenianfen&&registerForm.value.shifoubiye === '是')){
			context?.$toolUtil.message(`毕业年份不能为空`,'error')
			return false
		}
		if( parseInt(registerForm.value.biyenianfen)<1980 ) {
    		context?.$toolUtil.message('不支持选择比1980小的年份','warning')
  		}
		if((!registerForm.value.xiangmufuzeren)){
			context?.$toolUtil.message(`项目负责人不能为空`,'error')
			return false
		}
		if(registerForm.value.touxiang!=null){
			registerForm.value.touxiang = registerForm.value.touxiang.replace(new RegExp(context?.$config.url,"g"),"");
		}
		if(registerForm.value.email&&(!context?.$toolUtil.isEmail(registerForm.value.email))){
			context?.$toolUtil.message(`邮箱应输入邮件格式`,'error')
			return false
		}
        url=tableName.value +"/register?emailcode="+emailCode.value;
        if(registerForm.value.email&&(!context?.$toolUtil.isEmail(registerForm.value.email))){
            context?.$toolUtil.message('请输入正确的邮箱格式','error')
            return false
        }
		if((!emailCode.value)){
			context?.$toolUtil.message('验证码不能为空','error')
			return false
		}
		if(!registerForm.value.shoujihaoma){
			context?.$toolUtil.message('手机号不能为空', 'error')
			return false
		}
		if(!context?.$toolUtil.isMobile(registerForm.value.shoujihaoma)){
			context?.$toolUtil.message('手机号格式不正确', 'error')
			return false
		}
		if(!smsCode.value){
			context?.$toolUtil.message('请输入短信验证码', 'error')
			return false
		}
		context?.$http({
			url:url,
			method:'post',
			data:registerForm.value
		}).then(res=>{
			context?.$toolUtil.message('注册成功','success', obj=>{
				context?.$router.push({
					path: "/login"
				});
			})
		})
		.catch(err => { // 请求失败时捕获错误
  		context?.$toolUtil.message(`注册失败: ${err.message}`, 'error');
		})
		
	}
	//返回登录
	const close = () => {
		context?.$router.push({
			path: "/login"
		});
	}
	init()
	onMounted(()=>{

	})
	const biyenianfen = ref('')
	const yearList = ref(Array.from({length: 46}, (_, i) => 1985 + i))
	const smsCode = ref('')
	const smsTime = ref(0)
	const setSmsCode = ref('发送验证码')
	const getSmsCodeType = ref(false)

	const smsTimer = () => {
		if(smsTime.value > 0) {
			getSmsCodeType.value = true
			setSmsCode.value = smsTime.value + 's'
			smsTime.value--
			setTimeout(() => {
				smsTimer()
			}, 1000)
		} else {
			smsTime.value = 0
			setSmsCode.value = '发送验证码'
			getSmsCodeType.value = false
		}
	}

	const getSmsCode = () => {
		if(!registerForm.value.shoujihaoma) {
			context?.$toolUtil.message('请输入手机号', 'error')
			return false
		}
		if(!context?.$toolUtil.isMobile(registerForm.value.shoujihaoma)) {
			context?.$toolUtil.message('手机号格式不正确', 'error')
			return false
		}
		smsTime.value = 60
		smsTimer()
		context?.$http({
			url: `daoshi/sendsms?mobile=${registerForm.value.shoujihaoma}`,
			method: 'get'
		}).then(res => {
			context?.$toolUtil.message('验证码发送成功', 'success')
		})
	}
</script>
<style lang="scss" scoped>
.register_view {
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
}

.register_container {
	display: flex;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
}

/* 左侧背景区域样式 */
.register_left {
	flex: 1;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: white;
	position: relative;
}

.left_content {
	max-width: 500px;
	margin: 0 auto;
}

.left_title {
	font-size: 42px;
	font-weight: bold;
	margin-bottom: 16px;
}

.left_subtitle {
	font-size: 20px;
	margin-bottom: 48px;
	opacity: 0.9;
}

.stats_cards {
	margin-top: 40px;
}

.stat_card {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	padding: 24px;
	color: white;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.card_label {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}

.stat_content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.stat_item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	
	i {
		font-size: 24px;
	}
}

/* 右侧注册表单区域样式 */
.register_right {
	flex: 1.2;
	background: white;
	padding: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}

.register_form {
	width: 100%;
	max-width: 600px;
	padding: 20px;
}

.title_view {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 30px;
	color: #333;
	text-align: center;
}

.form-content {
	margin-bottom: 30px;
}

.form-group {
	margin-bottom: 20px;
	width: 100%;
}

.form-row {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	width: 100%;
}

.half {
	flex: 1;
	margin-bottom: 0;
}

.form-label {
	display: block;
	font-size: 14px;
	color: #606266;
	margin-bottom: 8px;
}

.form-input, .form-select {
	width: 100%;
	height: 40px;
	line-height: 40px;
	padding: 0 15px;
	border: 1px solid #DCDFE6;
	border-radius: 4px;
	transition: border-color 0.2s;
	
	&:focus {
		outline: none;
		border-color: #409EFF;
	}
}

.form-textarea {
	width: 100%;
	padding: 10px 15px;
	border: 1px solid #DCDFE6;
	border-radius: 4px;
	min-height: 80px;
	resize: vertical;
	transition: border-color 0.2s;
	
	&:focus {
		outline: none;
		border-color: #409EFF;
	}
}

.upload-wrapper {
	width: 100%;
}

.verification-code-wrapper {
	position: relative;
	width: 100%;
	
	.code-input {
		width: 100%;
		padding-right: 120px;
	}
	
	.send-code-btn {
		position: absolute;
		right: 0;
		top: 0;
		height: 40px;
		padding: 0 15px;
		background: #1e88e5;
		color: #fff;
		border: none;
		border-radius: 0 4px 4px 0;
		
		&:disabled {
			background: #ccc;
			cursor: not-allowed;
		}
	}
}

.button-wrapper {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.register-btn {
	width: 100%;
	height: 44px;
	background: #1e88e5;
	border: none;
	color: white;
	font-size: 16px;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.3s;
	
	&:hover {
		background: #1976d2;
	}
}

.login-link {
	margin-top: 16px;
	color: #1e88e5;
	cursor: pointer;
	font-size: 14px;
	
	&:hover {
		text-decoration: underline;
	}
}

@media screen and (max-width: 1200px) {
	.register_container {
		flex-direction: column;
	}
	
	.register_left {
		display: none;
	}
	
	.register_right {
		padding: 20px;
	}
}

@media screen and (max-width: 768px) {
	.form-row {
		flex-direction: column;
		gap: 20px;
	}
	
	.half {
		width: 100%;
	}
}

/* Custom styling for element-plus components */
:deep(.el-select) {
	width: 100%;
}

:deep(.el-button--primary) {
	background-color: #1e88e5;
	border-color: #1e88e5;
}

:deep(.el-button--primary:hover) {
	background-color: #1976d2;
	border-color: #1976d2;
}
</style>